<template>
  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="600px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="auto">
      <el-row>
        <el-col :span="18">
          <el-form-item label="发生时间" prop="occurrenceTime">
            <el-date-picker
              v-model="form.occurrenceTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择发生时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="费用类型" prop="expenseType">
            <el-select v-model="form.expenseType" placeholder="请选择费用类型" clearable>
              <el-option
                v-for="dict in dict.type.customer_expense_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value * 1"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="费用金额" prop="expenseAmount">
            <el-input-number
              controls-position="right"
              :step="100"
              style="width: 150px"
              :precision="2"
              :min="0"
              v-model="form.expenseAmount"
              placeholder="请输入费用金额"
            >
            </el-input-number>
            元
          </el-form-item>
          <el-form-item label="客情摘要" prop="customerSummary">
            <el-input type="textarea" v-model="form.customerSummary" placeholder="请输入客情摘要" />
          </el-form-item>
          <el-form-item label="附件" prop="annexList">
            <image-upload
              @input="
                (val) => {
                  const imageList = val.split(',')
                  form.annexDtoList = imageList.map((item) => {
                    return {
                      name: new Date().getTime(),
                      url: item,
                    }
                  })
                }
              "
              :limit="20"
              :value="form.annexList"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="open = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { customerRelationship } from '@/api/biz/customer'

export default {
  name: 'AddExpense',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    dataSource: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      open: false,
      title: '',
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        occurrenceTime: [{ required: true, message: '请发生时间', trigger: 'change' }],
        expenseType: [{ required: true, message: '请选择费用类型', trigger: 'change' }],
        expenseAmount: [{ required: true, message: '请输入费用金额', trigger: 'blur' }],
        customerSummary: [{ required: true, message: '请输入客情摘要', trigger: 'blur' }],
      },
    }
  },
  dicts: ['customer_expense_type'],
  watch: {
    show: {
      handler(val) {
        this.open = val
      },
    },
    open: {
      handler(val) {
        this.reset()
        if (val) {
          this.title = this.dataSource.id ? '修改客情维护' : '添加客情维护'
          if (this.dataSource.annexDtoList) {
            this.dataSource.annexList = this.dataSource.annexDtoList.map((item) => item.url)
          }
          this.form = JSON.parse(JSON.stringify(this.dataSource))
        } else {
          this.$emit('cancel', false)
        }
      },
    },
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: null,
        occurrenceTime: null,
        expenseType: null,
        expenseAmount: null,
        customerSummary: null,
        annexList: null,
        annexDtoList: null,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const currentData = { ...this.form }
          delete currentData.annexPreviewList
          delete currentData.annexList
          customerRelationship(currentData).then((response) => {
            this.$modal.msgSuccess(this.form.id ? '修改成功' : '新增成功')
            this.open = false
            this.$emit('refresh')
          })
        }
      })
    },
  },
}
</script>
